<template>
  <div class="mix-table">
    <!--表格-->
    <el-table
      :data="tableData"
      style="width: 100%">
      <!--字段插槽-->
      <slot name="column"></slot>
      <el-table-column v-if="showCon" label="操作">
        <template slot-scope="scope">
          <!--控制插槽-->
          <slot name="con" :item="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="margin-top: 10px">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name: 'mixTable',
    props: ['showCon', 'page'],
    data() {
      return {
        tableData: [],
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    },
    methods: {
      getData() {
        this.$emit('getPage', {'current': this.currentPage, 'size': this.pageSize})
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.getData()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.currentPage = val
        this.getData()
      }
    },
    watch: {
      page: function (val) {
        this.tableData = val.records
        this.total = val.total
      }
    },
    mounted() {
      if (this.page) {
        this.tableData = this.page.records
        this.total = this.page.total
      }

    }
  }
</script>

<style scoped>

</style>
